<template>
  <div style="">
    <div
      class="mdui-appbar mdui-shadow-3 mdui-appbar-fixed mdui-color-white"
      style="z-index:9999999"
    >
      <div class="mdui-toolbar  ">
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"
          ><i class="mdui-icon material-icons">menu</i></a
        >
        <span class="mdui-typo-title">胶几人后台管理系统</span>
        <div class="mdui-toolbar-spacer"></div>
        {{ name }}
        <a
          href="javascript:;"
          class="mdui-btn mdui-btn-icon"
          mdui-menu="{target: '#example-attr'}"
          ><i class="mdui-icon material-icons">more_vert</i></a
        >
        <ul class="mdui-menu" id="example-attr">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple" v-on:click="exit_login"
              >退出登陆</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div
      class="mdui-drawer mdui-shadow-3 mdui-drawer-open"
      id="drawer"
      style="margin-top: 64px"
    >
      <ul class="mdui-list">
        <li class="mdui-subheader">订单管理</li>
        <router-link to="/order_list#state=0"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">payment</i>
            <div class="mdui-list-item-content">待付款({{ s0 }})</div>
          </li></router-link
        >
        <router-link to="/order_list#state=1"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
            <div class="mdui-list-item-content">待发货({{ s1 }})</div>
          </li></router-link
        >
        <router-link to="/order_list#state=2"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >assignment_turned_in</i
            >
            <div class="mdui-list-item-content">待收货({{ s2 }})</div>
          </li></router-link
        >
        <router-link to="/order_list#state=3"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">edit</i>
            <div class="mdui-list-item-content">待评价({{ s3 }})</div>
          </li></router-link
        >
        <router-link to="/order_list#state=4"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">check</i>
            <div class="mdui-list-item-content">已完成({{ s4 }})</div>
          </li></router-link
        >
        <router-link to="/order_list#state=10"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">close</i>
            <div class="mdui-list-item-content">已取消({{ s10 }})</div>
          </li></router-link
        >
        <li class="mdui-subheader">轮播图管理</li>
        <router-link to="/roll_image_list"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >image_aspect_ratio</i
            >
            <div class="mdui-list-item-content">轮播图列表</div>
          </li></router-link
        >
        <router-link to="/roll_image_add"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >add_a_photo</i
            >
            <div class="mdui-list-item-content">轮播图添加</div>
          </li></router-link
        >
        <li class="mdui-subheader">分类管理</li>
        <router-link to="/sort_list"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >format_list_bulleted</i
            >
            <div class="mdui-list-item-content">分类列表</div>
          </li></router-link
        >
        <router-link to="/sort_add"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >playlist_add</i
            >
            <div class="mdui-list-item-content">分类添加</div>
          </li></router-link
        >
        <li class="mdui-subheader">商品管理</li>
        <router-link to="/commodity_list"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >view_list</i
            >
            <div class="mdui-list-item-content">商品列表</div>
          </li></router-link
        >
        <router-link to="/commodity_edit"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">edit</i>
            <div class="mdui-list-item-content">商品编辑</div>
          </li></router-link
        >
        <router-link to="/commodity_add"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >add_circle</i
            >
            <div class="mdui-list-item-content">商品添加</div>
          </li></router-link
        >
        <li class="mdui-subheader">文章管理</li>
        <router-link to="/article_list"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >view_list</i
            >
            <div class="mdui-list-item-content">文章列表</div>
          </li></router-link
        >

        <li class="mdui-subheader">用户管理</li>
        <router-link to="/admin_list"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">group</i>
            <div class="mdui-list-item-content">管理员列表</div>
          </li></router-link
        >
        <router-link to="/admin_add"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >person_add</i
            >
            <div class="mdui-list-item-content">管理员添加</div>
          </li></router-link
        >

        <router-link to="/change_user_password"
          ><li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons"
              >priority_high</i
            >
            <div class="mdui-list-item-content">修改用户密码</div>
          </li></router-link
        >
      </ul>
    </div>
    <div
      class="mdui-drawer-body-left mdui-appbar-with-toolbar"
      style="height: 100%"
    >
      <router-view :key="key()"></router-view>
    </div>
  </div>
</template>

<script>
import * as mdui from "mdui";
import axios from "axios";
import qs from "qs";
import jm from "./../../static/jm";

const BASE_URL = "http://127.0.0.1:8886";
export default {
  name: "login",
  data() {
    return {
      token: "",
      name: "加载中",
      s0: "",
      s1: "",
      s2: "",
      s3: "",
      s4: "",
      s10: ""
    };
  },
  methods: {
    key() {
      // if(this.$route.path.match("commodity_add"))
      //   return this.$route.path + Math.random();
      return this.$route.path;
    },
    exit_login() {
      window.localStorage.setItem("token", "");
      this.$router.push("/login");
    },
    login() {
      if (this.phone_number.length != 11) {
        mdui.default.alert("请检查手机号码");
        return;
      }
      if (this.password.length < 9) {
        mdui.default.alert("请输入9位以上密码");
        return;
      }
    },
    get_type() {
      this.token = window.localStorage.getItem("token");
      axios
        .post(
          BASE_URL + "/admin/get_my_admin_type",
          qs.stringify({ token: this.token }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          if (re.data.状态码 === 200) {
            if (re.data.管理员) {
              this.name = re.data.用户名;
            } else {
              this.name = "无权限";
              this.token = window.localStorage.setItem("token", "");
              this.$router.push("/login");
            }
          } else {
            if (re.data.备注 === "token无效") {
              this.token = window.localStorage.setItem("token", "");
              this.$router.push("/login");
            } else mdui.default.alert(re.data.备注);
          }
        })
        .catch(err => {
          mdui.default.alert("网络错误");
        });
    },
    get_order_type_sum() {
      this.token = window.localStorage.getItem("token");
      axios
        .post(
          BASE_URL + "/order/admin_get_order_sum",
          qs.stringify({ token: this.token }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          if (re.data.状态码 === 200) {
            this.s0 = re.data.待付款;
            this.s1 = re.data.待发货;
            this.s2 = re.data.待收货;
            this.s3 = re.data.待评价;
            this.s4 = re.data.已完成;
            this.s10 = re.data.已取消;
          } else {
            if (re.data.备注 === "token无效") {
              this.token = window.localStorage.setItem("token", "");
              this.$router.push("/login");
            } else mdui.default.alert(re.data.备注);
          }
        })
        .catch(err => {
          mdui.default.alert("网络错误");
        });
    }
  },
  created() {
    this.token = window.localStorage.getItem("token");
    if (this.token != null && this.token.length == 64) {
      this.get_type();
      this.get_order_type_sum();
      this.$router.push("/commodity_list");
    } else {
      this.$router.push("/login");
    }
  }
};
</script>

